﻿<div class="modal fade" id="[PopupId]" tabindex="-1" role="dialog" ng-controller="PopupController" aria-labelledby="popup-modal-label" aria-hidden="true" data-backdrop="static">
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
        <div class="modal-dialog">
            <div class="modal-content" style="color:#333;">
                <div class="modal-header" style="background-color: #0D47A1;color: #FFF;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#fff; border-color:#fff;"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="popup-modal-label">TRYOUT SINGUP</h4>
                </div>
                <div class="modal-body">
                    <!-- NAME -->
                    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
                        <label>Name*</label>
                        <input type="text" name="name" class="form-control" ng-model="name" ng-minlength="3" ng-maxlength="25" required>
                        <p ng-show="userForm.name.$error.required && !userForm.name.$pristine" class="help-block">Your name is required.</p>
                        <p ng-show="userForm.name.$error.minlength" class="help-block">name is too short.</p>
                        <p ng-show="userForm.name.$error.maxlength" class="help-block">name is too long.</p>
                    </div>
                    <!-- EMAIL -->
                    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
                        <label>Email</label>
                        <input type="text" name="email" class="form-control" ng-model="email" required ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+.[a-z0-9-]/" />
                        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
                    </div>
                    <!-- PHONE -->
                    <div class="form-group" ng-class="{ 'has-error' : userForm.phone.$invalid && !userForm.phone.$pristine }">
                        <label>Phone</label>
                        <input type="text" name="phone" class="form-control" ng-model="phone" ng-minlength="3" ng-maxlength="10" ng-pattern="/^\d/">
                        <p ng-show="userForm.phone.$error.minlength" class="help-block">phone is too short.</p>
                        <p ng-show="userForm.phone.$error.maxlength" class="help-block">phone is too long.</p>
                        <p ng-show="userForm.phone.$error.pattern" class="help-block">Enter valid phone.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>